<template>
  <div class="logo">
    <router-link :to="{ name: 'dashboard' }">
      <!-- <LogoSvg alt="logo" /> -->
      <div style="display:flex;justify-content: space-around;">
        <div class="logo_" v-if="logo">
          <img :src="logo" alt style="position:absolute;top:16px; left: 25px" />
        </div>
        <!-- <img src="" alt=""> -->
        <div style="color:white;font-weight: 800;font-size:20px;padding-left:35px;" v-if="showTitle">{{ title }}</div>
      </div>
    </router-link>
  </div>
</template>

<script>
import LogoSvg from '@/assets/logo.svg?inline'
import { companyInfo } from '@/api/login'
export default {
  name: 'Logo',
  components: {
    LogoSvg
  },
  props: {
    showTitle: {
      type: Boolean,
      default: true,
      required: false
    }
  },
  data() {
    return {
      title: '',
      logo: ''
    }
  },
  created() {
    companyInfo().then(res => {
      this.title = res.value.name
      this.logo = res.value.logo.url
    })
  }
}
</script>
<style lang="less" scoped>
.logo {
  background: linear-gradient(90deg,  rgb(66, 113, 243) 0%,  rgb(66, 113, 243) 100%) !important;
  // background-color: rgb(66, 113, 243);
}

.logo_ {
  border-radius: 4px;

  img {
    width: 64px;
    height: 64px;
    overflow: hidden;
  }
}
</style>
